<template>
  <div>
    <div class="menu" v-show="activeIndex">
      <div
        class="item"
        :class="{ active: item.id == activeIndex }"
        v-for="item in menu"
        :key="item.id"
       
      >
      <router-link :to="item.path">
        {{ item.msg }}
        <!-- 插槽 -->
      </router-link>
       <!-- <a :href="'#'+item.path">{{ item.msg }}</a> -->
      </div>
    </div>
      <router-view :com="com"/>
  </div>
</template>

<script>

import NotFound from  "./views/NotFound.vue"
import RouterLink from './components/RouterLink.vue';
import RouterView from "./components/RouterView.vue";
export default {
  components: {
    RouterLink,
    RouterView,
    NotFound,
  },
  data() {
    return {
      com: "home",
      activeIndex: 1,
      menu: [
        { id: 1, msg: "首页",path:"/", com: "home" },
        { id: 2, msg: "关于",path:"/about", com: "About" },
        { id: 3, msg: "生命周期",path:"/life", com: "life" },
        { id: 4, msg: "父传子",path:"/ptc", com: "PTC" },
        { id: 5, msg: "用户管理",path:"/user", com: "User" },
        { id: 6, msg: "子传子",path:"/ctc", com: "CTC" },
        { id: 7, msg: "跨层级",path:"/pts", com: "PTS" },
        { id: 8, msg: "购物车",path:"/shoppingcar", com: "Shoppingcar" },
        { id: 9, msg: "Refs", path:"/refs",com: "Refs" },
        { id: 10, msg: "子更新父",path:"/update", com: "UpdateVue" },        
      ],
    };
  },
  methods: {
    change(item) {
      this.activeIndex = item.id;
      this.com = item.com;
    },
  },
  mounted(){//页面结构加载完成

    window.onhashchange = ()=>{
      let  hash  = window.location.hash;
        if(hash){//判断有没有数据
          let path  = hash.split("#")[1];
          let targetList = this.menu.filter(item=>item.path==path);//filter返回的都是集合
          if(targetList.length){//判断是否能找到
            let info  = targetList[0]
            this.activeIndex  = info.id;
            this.com = info.com;
          }else{
            window.location.href="#/404";
            this.activeIndex = 0;
            this.com = NotFound;
          }

        }
    }

  }
};
</script>

<style></style>
